<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    #foo {
        user-select: none;
    }
    #bar {
        -webkit-user-select: none;
    }
</style>
<div id="container">
<p id="description">Test setting CSSStyleDeclaration.webkitUserStyle and userStyle</p>
<div id="sample1" contenteditable="true">editable</div>
<div id="sample2" contenteditable="false">uneditable</div>
<div class="none" style="user-select:none"></div>
<div class="none" style="-webkit-user-select:none"></div>
</div>
<div id="log"></div>
<script>
var selection = window.getSelection();
function setSelection(node)
{
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.empty();
    selection.addRange(range);
}

test(function(){
    // user-select:none in editable element
    sample1.style.webkitUserSelect = "none";
    setSelection(sample1);
    assert_equals(selection.type, "Range");

    // user-select:none in uneditable element
    sample2.style.webkitUserSelect = "none";
    setSelection(sample2);
    assert_equals(selection.type, "None");
});

var style = document.createElement("baz").style;
test(function () {
  assert_true("userSelect" in style);
}, "'userSelect' in style");
test(function () {
  assert_true("webkitUserSelect" in style);
}, "'webkitUserSelect' in style");

Array.prototype.forEach.call(document.styleSheets[0].cssRules, function (cssRule) {
  testUserSelect(cssRule.style, cssRule.cssText);
});

Array.prototype.forEach.call(document.querySelectorAll(".none"), function (element) {
  testUserSelect(getComputedStyle(element), element.getAttribute("style"));
});

function testUserSelect(style, title) {
  test(function () {
    assert_equals(style.userSelect, "none");
  }, "userSelect of '" + title + "' should be 'none'");
  test(function () {
    assert_equals(style.webkitUserSelect, "none");
  }, "webkitUserSelect of '" + title + "' should be 'none'");
}
</script>
